<template>
    <div class="layout-page">
        <router-view></router-view>
        <!-- tabbar标签栏的route的路由功能开启 -->
        <van-tabbar route>
            <van-tabbar-item to="/article" icon="notes-o">面经</van-tabbar-item>

            <van-tabbar-item to="/collect" icon="star-o">收藏</van-tabbar-item>

            <van-tabbar-item to="/like" icon="like-o">喜欢</van-tabbar-item>

            <van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>

        </van-tabbar>
    </div>

</template>

<script>
export default {
  name: 'LayoutPage',
  data () {
    return {}
  }
}
</script>
<style lang="less" scoped>
.article-item {
.head {
  display: flex;
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
  }
  .con {
    flex: 1;
    overflow: hidden;
    padding-left: 10px;
    p {
      margin: 0;
      line-height: 1.5;
      &.title {
        width: 280px;
      }
      &.other {
        font-size: 10px;
        color: #999;
      }
    }
  }
}
.body {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-top: 10px;
}
.foot {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}
}
</style>
